<template>
  <div class="wrapper">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-row>
          <el-col style="text-align: center">桥梁工程（第2版）</el-col>
        </el-row>
        <el-row>
          <el-col style="visibility: hidden">123</el-col>
        </el-row>
        <el-row>
          <el-col style="text-align: center">
            <el-image
              style="width: 100px; height: 100px"
              :src="url"
              fit="fill"
            ></el-image>
          </el-col>
          <el-col style="visibility: hidden">123</el-col>
          <el-col style="text-align: center">
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick"
              :default-expand-all="true"
            ></el-tree>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" v-if="book === 0">
        <el-row>
          <el-col>
            <input-search />
          </el-col>
        </el-row>
        <el-row>
          <el-col style="visibility: hidden">123</el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-row>
              <el-col>
                <popover :content="txt1" @createBookMark="createBookMark" />
              </el-col>
            </el-row>
            <el-row>
              <el-col style="visibility: hidden">123</el-col>
            </el-row>
            <el-row>
              <el-col style="visibility: hidden">123</el-col>
            </el-row>
            <el-row>
              <el-col
                :span="6"
                v-for="(i, k) in 4"
                :key="k"
                @click.native="dialogVisible = true"
              >
                <el-image
                  style="width: 100px; height: 100px"
                  :src="url1"
                  fit="fill"
                ></el-image>
              </el-col>
            </el-row>
            <el-row> <el-col style="visibility: hidden">123</el-col> </el-row
            ><el-row>
              <el-col style="visibility: hidden">123</el-col>
            </el-row>
            <el-row>
              <el-col>
                <popover :content="txt2" @createBookMark="createBookMark" />
              </el-col>
            </el-row>
            <el-row>
              <el-col style="visibility: hidden">123</el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                >
                </el-pagination>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="12" v-if="book === 1">
        <el-row>
          <el-col>
            <input-search />
          </el-col>
        </el-row>
        <el-row>
          <el-col style="visibility: hidden">123</el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-row>
              <el-col>
                <popover :content="txt3" @createBookMark="createBookMark" />
              </el-col>
            </el-row>
            <el-row>
              <el-col style="visibility: hidden">123</el-col>
            </el-row>
            <el-row>
              <el-col style="visibility: hidden">123</el-col>
            </el-row>
            <el-row>
              <el-col
                :span="6"
                v-for="(i, k) in 4"
                :key="k"
                @click="dialogVisible = true"
              >
                <el-image
                  style="width: 100px; height: 100px"
                  :src="url1"
                  fit="fill"
                ></el-image>
              </el-col>
            </el-row>
            <el-row> <el-col style="visibility: hidden">123</el-col> </el-row
            ><el-row>
              <el-col style="visibility: hidden">123</el-col>
            </el-row>
            <el-row>
              <el-col>
                <popover :content="txt4" @createBookMark="createBookMark" />
                </el-col>
            </el-row>
            <el-row>
              <el-col style="visibility: hidden">123</el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                >
                </el-pagination>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="12" v-if="book === 2">
        <el-row>
          <el-col>
            <input-search />
          </el-col>
        </el-row>
        <el-row>
          <el-col style="visibility: hidden">123</el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-row>
              <el-col><popover :content="txt5" @createBookMark="createBookMark" /></el-col>
            </el-row>
            <el-row>
              <el-col style="visibility: hidden">123</el-col>
            </el-row>
            <el-row>
              <el-col style="visibility: hidden">123</el-col>
            </el-row>
            <el-row>
              <el-col
                :span="6"
                v-for="(i, k) in 4"
                :key="k"
                @click="dialogVisible = true"
              >
                <el-image
                  style="width: 100px; height: 100px"
                  :src="url1"
                  fit="fill"
                ></el-image>
              </el-col>
            </el-row>
            <el-row> <el-col style="visibility: hidden">123</el-col> </el-row
            ><el-row>
              <el-col style="visibility: hidden">123</el-col>
            </el-row>
            <el-row>
              <el-col>
                <popover :content="txt0" @createBookMark="createBookMark" />
                </el-col>
            </el-row>
            <el-row>
              <el-col style="visibility: hidden">123</el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                >
                </el-pagination>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="6">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="书签" name="first">
            <el-row>
              <el-col v-for="(i, k) in bookmark" :key="k"
                ><i class="el-icon-s-flag"></i> 第{{ k }}页面 第{{ k + 3 }}章
                {{ i.name }} <i class="el-icon-edit"></i
              ></el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="讨论" name="second"> </el-tab-pane>
          <el-tab-pane label="文献" name="third"> </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <el-dialog title="图片预览" :visible.sync="dialogVisible" width="30%">
      <el-row type="flex" justify="center">
        <el-col :span="18">
          <el-image :src="imgSrc"></el-image>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import inputSearch from "@/components/inputSearch/index";
import popover from "@/components/popover/index";
export default {
  components: {
    inputSearch,
    popover,
  },
  props: {},
  data() {
    return {
      dialogVisible: false,
      imgSrc: "https://qlgc.readthedocs.io/zh/latest/_static/fig/1-1-5.jpg",
      url: "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/abpic/item/c9d4cf43929a492c72f05d35.jpg",
      url1: "https://qlgc.readthedocs.io/zh/latest/_static/fig/1-1-5.jpg",
      currentPage4: 4,
      activeName: "first",
      book: 0,
      bookmark: [],
      txt0: `本教材自2017年2月发行以来已使用了6年多，在此期间，新材料、新工艺的使用以及一批高水平大跨径桥梁相继建成，大大提升了我国桥梁的设计与建造水平。为跟上时代步伐，适应长安大学道路桥梁与渡河工程专业的课改要求，对第一版内容进行了以下补充及修改：

第一篇：将桥面系构造部分作为“通用构造”移至第一篇第四章；

第二篇：将第一版第四篇刚架桥内容合并至第二版第二篇梁桥；

部分篇的章节中补充增加了“拓展小知识”。本教材以公路桥梁为主进行编写，考虑到我国高速铁路和城市轨道交通行业的迅猛发展，学生毕业后除了进入公路、市政工程等行业从事桥梁工程相关工作外，也有一部分学生进入到了铁路或城市轨道交通行业相关部门工作，因此，第二版教材中将一些知识点和重要概念以“拓展小知识”的形式说明有轨桥梁（铁路桥梁，城市轨道交通桥梁等）与无轨桥梁（公路桥梁，城市道路桥梁等）的差异，以便学生拓展知识面，更好地适应社会需求。`,
      txt1: `第一篇：将桥面系构造部分作为“通用构造”移至第一篇第四章；
                    第二篇：将第一版第四篇刚架桥内容合并至第二版第二篇梁桥；
                    部分篇的章节中补充增加了“拓展小知识”。本教材以公路桥梁为主进行编写，考虑到我国高速铁路和城市轨道交通行业的迅猛发展，学生毕业后除了进入公路、市政工程等行业从事桥梁工程相关工作外，也有一部分学生进入到了铁路或城市轨道交通行业相关部门工作，因此，第二版教材中将一些知识点和重要概念以“拓展小知识”的形式说明有轨桥梁（铁路桥梁，城市轨道交通桥梁等）与无轨桥梁（公路桥梁，城市道路桥梁等）的差异，以便学生拓展知识面，更好地适应社会需求。`,
      txt3: `每篇各章补充完善了“思考与练习”。在每章学习过后，通过练习巩固知识。在第四篇第一章最后补充了“斜拉桥设计与建造综合练习”，供读者学习参考。
                    在每篇各章内容最后增加了“学习提示”，方便读者学习与理解。
                    在每篇最后增加了“本篇总结”，方便读者归纳总结。
                    在教材最后补充了“附录Ⅵ 总复习”，方便读者掌握全部课程内容。
                    由于桥梁工程课程学习中，各桥型名词与术语较多，为方便学生学习，在“附录Ⅶ
                    名词及术语”中进行了汇总，方便学生查阅。
                    本教材按80课时（40讲）授课，在每一讲授课内容相应位置插入授课PPT，方便读者学习。
                    按照2017年后出版的几部新版规范对教材相关内容进行了修改与更新。
                    教材根据现行规范、公路桥涵设计手册及施工手册，在参考文献中所列出的参考资料等基础上，总结多年讲授《桥梁工程》课程的体会与经验来编写。具体参编者为：`,
      txt2:`桥梁，形态各异、婀娜多姿、雄伟壮观。桥梁，如长虹卧波，似鳌背连云，飞架江河湖海，跨越山涧深谷，使天堑变通途，将人类从此岸渡到彼岸，由远古引向未来。人类受自然界的启示，诞生了桥的概念和桥的形态（[图1-1-1](https://qlgc.readthedocs.io/zh/latest/01.html#image1a)），又在谋求生存和发展、改造自然与征服屏障的历史长河中，创造和发展了桥梁`,
      txt4:`20世纪80年代前，桥梁结构大多采用手工计算、手工绘图的设计模式，不仅工作效率低，一些受力相对复杂的结构形式因解析困难、费工费时而较少采用，以梁桥、中小跨径拱桥居多。随着计算机普及应用，以及结构分析计算软件、结构设计软件的开发利用，设计水平与工作效率大大提高，对超静定结构尤其是高次超静定结构的解析变得不再难以逾越，加之施工工艺、施工技术、施工机具等的发展与创新，一些大跨径、高水平桥梁相继建成。例如1991年建成主跨423
                m的上海南浦大桥（主跨为423 m结合梁斜拉桥），开创了我国修建400
                m以上大跨度斜拉桥的先河。1999年建成主跨1385
                m的江阴长江公路大桥，是我国超过千米跨径的悬索桥，北锚碇基础采用支承于紧密砂层上的巨型沉井，为我国第一个不以嵌入岩体为基础的锚碇。`,
      txt5:`在设计上融入了斜拉桥、拱桥和悬索桥三种不同类型桥梁的设计工艺，是当时世界上单座桥梁建造中施工工艺最复杂、用钢量最多的大桥。2007年建成主跨420
                m的重庆菜园坝长江大桥是公路和轨道交通两用桥，大桥主体首创刚构、钢桁梁、系杆拱组合结构体系，不仅在我国，而且在世界桥梁中也具有独特地位。`,
      data: [
        {
          label: "一章 1",
          children: [
            {
              label: "二章 1-1",
              children: [
                {
                  label: "三章 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一章 2",
          children: [
            {
              label: "二章 2-1",
              children: [
                {
                  label: "三章 2-1-1",
                },
              ],
            },
            {
              label: "二章 2-2",
              children: [
                {
                  label: "三章 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一章 3",
          children: [
            {
              label: "二章 3-1",
              children: [
                {
                  label: "三章 3-1-1",
                },
              ],
            },
            {
              label: "二章 3-2",
              children: [
                {
                  label: "三章 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    createBookMark() {
      this.bookmark.push({ name: `书签${Math.round(Math.random() * 10)}` });
    },
    handleNodeClick(data) {
      const arr = [0, 1, 2];
      this.book = arr[Math.floor(Math.random() * arr.length)];
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.wrapper {
}
</style>
